<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>字体图标 | vue-next-admin</title>
    <meta name="description" content="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档">
    <link rel="stylesheet" href="/vue-next-admin-doc-preview/assets/style.220fb3c9.css">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/plugin-vue_export-helper.da6f02ab.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/Home.f92766fb.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/config_iconfont_index.md.5afbfc15.lean.js">
    <link rel="modulepreload" href="/vue-next-admin-doc-preview/assets/app.43e6f49f.js">
    
    <link rel="icon" href="/vue-next-admin-doc-preview/images/favicon.ico">
  <meta name="keywords" content="doc、vue-next-admin、vue-next-admin-doc、vue3、element-plus、vuejs/vue-next">
  <meta name="description" content="🎉🎉🔥基于vue3.x 、Typescript、vite、Element plus等，适配手机、平板、pc 的后台开源免费模板库（vue2.x请切换vue-prev-admin分支）开发文档">
  <script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?dd9ada7b25f65a181a42780f04b764e6";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
  <meta name="twitter:title" content="字体图标 | vue-next-admin">
  <meta property="og:title" content="字体图标 | vue-next-admin">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-fcf5c4a8><div class="sidebar-button" data-v-fcf5c4a8><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/vue-next-admin-doc-preview/" aria-label="vue-next-admin, back to home" data-v-fcf5c4a8 data-v-4424da2c><img class="logo" src="/vue-next-admin-doc-preview/images/logo-mini.svg" alt="Logo" data-v-4424da2c> vue-next-admin</a><div class="flex-grow" data-v-fcf5c4a8></div><div class="nav" data-v-fcf5c4a8><nav class="nav-links" data-v-fcf5c4a8 data-v-107a016c><!--[--><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item" href="/vue-next-admin-doc-preview/home/" data-v-e720f45e>指南 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item active" href="/vue-next-admin-doc-preview/config/" data-v-e720f45e>配置参考 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>集成后端</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/PandaGoAdmin/PandaX" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@熊猫 PandaGoAdmin</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://toscode.gitee.com/GionConnection/gopro_free" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@甜蜜蜜 GoPro平台</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://gitee.com/GionConnection/niupi-free" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@甜蜜蜜 NiuPi 平台</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://gitee.com/tiger1103/gfast/tree/os-v3/" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@游子 GFast-V3</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>线上演示</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue3.x 版本预览（vue-next-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue2.x 版本预览（vue-prev-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-e720f45e>更新日志 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>代码仓库</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>gitee（国内：实时更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/lyt-Top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>github（国外：定期更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin-doc" target="_blank" rel="noopener noreferrer" data-v-e720f45e>文档仓库 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--]--></header><aside class="sidebar" data-v-34c05c3a><nav class="nav-links nav" data-v-34c05c3a data-v-107a016c><!--[--><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item" href="/vue-next-admin-doc-preview/home/" data-v-e720f45e>指南 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item active" href="/vue-next-admin-doc-preview/config/" data-v-e720f45e>配置参考 <!----></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>集成后端</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/PandaGoAdmin/PandaX" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@熊猫 PandaGoAdmin</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://toscode.gitee.com/GionConnection/gopro_free" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@甜蜜蜜 GoPro平台</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://gitee.com/GionConnection/niupi-free" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@甜蜜蜜 NiuPi 平台</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://gitee.com/tiger1103/gfast/tree/os-v3/" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>@游子 GFast-V3</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>线上演示</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-next-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue3.x 版本预览（vue-next-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://lyt-top.gitee.io/vue-prev-admin-preview/#/login" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>vue2.x 版本预览（vue-prev-admin）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-e720f45e>更新日志 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-107a016c><div class="nav-dropdown-link" data-v-107a016c data-v-719eac16><button class="button" data-v-719eac16><span class="button-text" data-v-719eac16>代码仓库</span><span class="right button-arrow" data-v-719eac16></span></button><ul class="dialog" data-v-719eac16><!--[--><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>gitee（国内：实时更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-719eac16><div class="nav-dropdown-link-item" data-v-719eac16 data-v-43c736e2><a class="item isExternal" href="https://github.com/lyt-Top/vue-next-admin" target="_blank" rel="noopener noreferrer" data-v-43c736e2><span class="arrow" data-v-43c736e2></span><span class="text" data-v-43c736e2>github（国外：定期更新）</span><span class="icon" data-v-43c736e2><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-43c736e2><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><div class="item" data-v-107a016c><div class="nav-link" data-v-107a016c data-v-e720f45e><a class="item isExternal" href="https://gitee.com/lyt-top/vue-next-admin-doc" target="_blank" rel="noopener noreferrer" data-v-e720f45e>文档仓库 <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-e720f45e><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--]--><ul class="sidebar-links" data-v-34c05c3a><!--[--><li class="sidebar-link"><p class="sidebar-link-item">基础</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/">简介</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/menu/">菜单配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/layoutConfig/">布局配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/vue-next-admin-doc-preview/config/iconfont/">字体图标</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#element-plus-svg-图标">element plus svg 图标</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#iconfont-font-awesome-图标">iconfont &amp; font-awesome 图标</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#自定义封装-svg-图标">自定义封装 svg 图标</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#自定义引入本地图标">自定义引入本地图标</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/server/">服务端交互</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/vuex/">vuex</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/build/">打包预览</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">高级</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/power/">权限管理</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/route/">路由参数</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/i18n/">国际化</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/tagsView/">标签页</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/directive/">内置指令</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">其它</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/charts/">数据可视化</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/tool/">工具类集合</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/partyPlug/">第三方插件使用</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/builtPlug/">内置插件的使用</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/otherIssues/">其它问题</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">赞助</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-next-admin-doc-preview/config/support/">支持开源</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-1c2e469b><div class="container" data-v-1c2e469b><!--[--><!--]--><div style="position:relative;" class="content" data-v-1c2e469b><div><h1 id="字体图标" tabindex="-1">字体图标 <a class="header-anchor" href="#字体图标" aria-hidden="true">#</a></h1><h2 id="element-plus-svg-图标" tabindex="-1">element plus svg 图标 <a class="header-anchor" href="#element-plus-svg-图标" aria-hidden="true">#</a></h2><div class="danger custom-block"><p class="custom-block-title">Font Icon 向 SVG Icon 迁移</p><p>svg 文档地址：<a href="https://element-plus.gitee.io/zh-CN/component/icon.html" target="_blank" rel="noopener noreferrer">element plus 官网 Icon 图标</a>。<code>&quot;element-plus&quot;: &quot;^1.2.0-beta.4&quot;</code>。框架版本 <a href="https://gitee.com/lyt-top/vue-next-admin/releases" target="_blank" rel="noopener noreferrer">v1.2.0</a> 开始迁移。</p></div><p style="font-weight:bold;">一、框架中全局注册 svg</p><blockquote><p>1.1、<code>/@/utils/other.ts</code>，mian.ts 中引入 <code>import other from &#39;/@/utils/other&#39;;</code>。添加了 <code>element</code> 前缀，防止图标冲突, <code>el</code> 前缀已被使用，可以使用 <code>elxxx</code>。但是不建议已 <code>el</code> svg 前缀，因为会与 element plus 内置组件冲突</p></blockquote><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> App <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> svg <span class="token keyword">from</span> <span class="token string">&quot;@element-plus/icons&quot;</span><span class="token punctuation">;</span>

<span class="token comment">/**
 * 导出全局注册 element plus svg 图标
 * @param app vue 实例
 * @description 使用：https://element-plus.gitee.io/zh-CN/component/icon.html
 */</span>
<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">elSvg</span><span class="token punctuation">(</span>app<span class="token operator">:</span> App<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> icons <span class="token operator">=</span> svg <span class="token keyword">as</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> i <span class="token keyword">in</span> icons<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">element</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>icons<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> icons<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// main.ts</span>
<span class="token keyword">import</span> other <span class="token keyword">from</span> <span class="token string">&quot;/@/utils/other&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token function">createApp</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">;</span>
other<span class="token punctuation">.</span><span class="token function">elSvg</span><span class="token punctuation">(</span>app<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p style="font-weight:bold;">二、页面中使用 svg</p><div class="tip custom-block"><p class="custom-block-title">svg 图标说明</p><p>如：elementUser，由两部分组成：</p><p>1、<code>element</code>：<code>一、框架中全局注册 svg</code> 中添加的 svg 图标前缀。</p><p>2、<code>User</code>：为 svg 图标，请注意它的开头都是大写的，<a href="https://element-plus.gitee.io/zh-CN/component/icon.html" target="_blank" rel="noopener noreferrer">element plus 官网 Icon 图标</a>。</p></div><blockquote><p>2.1、框架中： <code>elementUser</code> 为全局注册的 svg，注意这里添加了 <code>&lt;el-icon&gt;&lt;/el-icon&gt;</code> 包裹着。</p></blockquote><p><code>2.1.1、框架中直接使用全局注册的 svg，会报：Property &quot;elementUser&quot; was accessed during render but is not defined on instance.</code></p><div class="language-html"><div class="highlight-lines"><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br></div><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span>
  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">&#39;</span>message.account.accountPlaceholder1<span class="token punctuation">&#39;</span>)<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ruleForm.userName<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">clearable</span>
  <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:prefix-icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>elementUser<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><code>2.1.2、所以使用了 &lt;el-icon&gt;&lt;/el-icon&gt; 包裹着</code></p><div class="language-html"><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlighted"> </div><br><br><br></div><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span>
  <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t(<span class="token punctuation">&#39;</span>message.account.accountPlaceholder1<span class="token punctuation">&#39;</span>)<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ruleForm.userName<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">clearable</span>
  <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>off<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#prefix</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-icon</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-input__icon<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>elementUser</span> <span class="token punctuation">/&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-icon</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><blockquote><p>2.2、<a href="https://element-plus.gitee.io/zh-CN/component/icon.html" target="_blank" rel="noopener noreferrer">element plus 官网 Icon 图标</a>：<code>Calendar</code> 为 svg 图标</p></blockquote><p><code>2.2.1、需要先引入</code></p><div class="language-ts"><pre><code><span class="token comment">// 引入方法一</span>
<span class="token operator">&lt;</span>script setup lang<span class="token operator">=</span><span class="token string">&quot;ts&quot;</span><span class="token operator">&gt;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> Calendar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@element-plus/icons&quot;</span><span class="token punctuation">;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

<span class="token comment">// 引入方法二</span>
<span class="token operator">&lt;</span>script lang<span class="token operator">=</span><span class="token string">&quot;ts&quot;</span><span class="token operator">&gt;</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> Calendar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;@element-plus/icons&quot;</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    Calendar
  <span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre></div><p><code>2.2.2、然后页面中使用</code></p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>input1<span class="token punctuation">&quot;</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Pick a date<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:suffix-icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Calendar<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><p style="font-weight:bold;">三、全局获取 svg</p><blockquote><p>3.1、图标选择器使用，<code>/@/utils/getStyleSheets.ts</code>（原初始化获取 css 样式，获取 element plus 自带图标方法）在 <a href="https://gitee.com/lyt-top/vue-next-admin/releases" target="_blank" rel="noopener noreferrer">tag v1.1.2</a> 中查看。element plus svg 图标也可以在框架中的 <a href="https://lyt-top.gitee.io/vue-next-admin-preview/#/pages/element" target="_blank" rel="noopener noreferrer">页面/element 字体图标</a> 演示中查看</p></blockquote><div class="language-ts"><pre><code><span class="token keyword">import</span> <span class="token punctuation">{</span> nextTick <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> svg <span class="token keyword">from</span> <span class="token string">&quot;@element-plus/icons&quot;</span><span class="token punctuation">;</span>

<span class="token comment">// 初始化获取 css 样式，获取 element plus 自带 svg 图标</span>
<span class="token comment">// 增加了 element 前缀，使用时：elementAim</span>
<span class="token keyword">const</span> <span class="token function-variable function">getElementPlusIconfont</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name"><span class="token builtin">Promise</span></span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> icons <span class="token operator">=</span> svg <span class="token keyword">as</span> <span class="token builtin">any</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> sheetsIconList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> i <span class="token keyword">in</span> icons<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        sheetsIconList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">element</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>icons<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>sheetsIconList<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token function">resolve</span><span class="token punctuation">(</span>sheetsIconList<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">else</span> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">&quot;未获取到值，请刷新重试&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="iconfont-font-awesome-图标" tabindex="-1">iconfont &amp; font-awesome 图标 <a class="header-anchor" href="#iconfont-font-awesome-图标" aria-hidden="true">#</a></h2><p style="font-weight:bold;">一、设置在线链接</p><blockquote><p>1.1、此处为使用在线链接教程，使用本地请查看：<a href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BC%95%E5%85%A5%E6%9C%AC%E5%9C%B0%E5%9B%BE%E6%A0%87">自定义引入本地图标</a></p></blockquote><div class="language-ts"><pre><code><span class="token comment">// `/@/utils/setIconfont.ts` cssCdnUrlList 方法中添加在线链接</span>
<span class="token comment">// 字体图标 url</span>
<span class="token keyword">const</span> cssCdnUrlList<span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token string">&quot;//at.alicdn.com/t/font_2298093_y6u00apwst.css&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><p style="font-weight:bold;">二、App.vue 中引入</p><div class="language-ts"><pre><code><span class="token keyword">import</span> setIntroduction <span class="token keyword">from</span> <span class="token string">&quot;/@/utils/setIconfont&quot;</span><span class="token punctuation">;</span>

<span class="token comment">// 设置初始化，防止刷新时恢复默认</span>
<span class="token function">onBeforeMount</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 设置批量第三方 icon 图标</span>
  setIntroduction<span class="token punctuation">.</span><span class="token function">cssCdn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p style="font-weight:bold;">三、界面中使用</p><div class="danger custom-block"><p class="custom-block-title">注意前缀</p><ul><li><p>iconfont：需要添加 <code>iconfont</code> 前缀，如：<code>iconfont xitongshezhi</code></p></li><li><p>font-awesome：需要添加 <code>fa</code> 前缀，如：<code>fa xitongshezhi</code></p></li></ul></div><div class="language-html"><pre><code><span class="token comment">&lt;!-- 项目使用 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>iconfont xitongshezhi<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- &lt;i class=&quot;fa xitongshezhi&quot;&gt;&lt;/i&gt; --&gt;</span>

<span class="token comment">&lt;!-- 或者 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SvgIcon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>iconfont xitongshezhi<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SvgIcon</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- &lt;SvgIcon name=&quot;fa xitongshezhi&quot;&gt;&lt;/SvgIcon&gt; --&gt;</span>
</code></pre></div><p style="font-weight:bold;">四、全局获取 iconfont &amp; font-awesome 图标</p><blockquote><p>4.1、<code>/@/utils/getStyleSheets.ts</code> 中的 <code>getAlicdnIconfont</code> 与 <code>getAwesomeIconfont</code> 方法。对应的图标在线演示 <a href="https://lyt-top.gitee.io/vue-next-admin-preview/#/pages/iocnfont" target="_blank" rel="noopener noreferrer">/pages/iocnfont</a></p></blockquote><div class="language-ts"><pre><code><span class="token comment">// 获取阿里字体图标</span>
<span class="token keyword">const</span> <span class="token function-variable function">getAlicdnIconfont</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name"><span class="token builtin">Promise</span></span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> styles<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">;</span>
      <span class="token keyword">let</span> sheetsList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">let</span> sheetsIconList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> styles<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>styles<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>href <span class="token operator">&amp;&amp;</span> styles<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>href<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;at.alicdn.com&quot;</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          sheetsList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>styles<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> sheetsList<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> sheetsList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>cssRules<span class="token punctuation">.</span>length<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span>
            sheetsList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span>selectorText <span class="token operator">&amp;&amp;</span>
            sheetsList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span>selectorText<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;.icon-&quot;</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span>
          <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            sheetsIconList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>
              <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>sheetsList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span>selectorText
                <span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> sheetsList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span>selectorText<span class="token punctuation">.</span>length<span class="token punctuation">)</span>
                <span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\:\:before</span><span class="token regex-delimiter">/</span><span class="token regex-flags">gi</span></span><span class="token punctuation">,</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
            <span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>sheetsIconList<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token function">resolve</span><span class="token punctuation">(</span>sheetsIconList<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">else</span> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">&quot;未获取到值，请刷新重试&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// 初始化获取 css 样式，这里使用 fontawesome 的图标</span>
<span class="token keyword">const</span> <span class="token function-variable function">getAwesomeIconfont</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name"><span class="token builtin">Promise</span></span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> styles<span class="token operator">:</span> <span class="token builtin">any</span> <span class="token operator">=</span> document<span class="token punctuation">.</span>styleSheets<span class="token punctuation">;</span>
      <span class="token keyword">let</span> sheetsList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">let</span> sheetsIconList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> styles<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>
          styles<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>href <span class="token operator">&amp;&amp;</span>
          styles<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>href<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;netdna.bootstrapcdn.com&quot;</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span>
        <span class="token punctuation">)</span> <span class="token punctuation">{</span>
          sheetsList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>styles<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> sheetsList<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> j <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> j <span class="token operator">&lt;</span> sheetsList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>cssRules<span class="token punctuation">.</span>length<span class="token punctuation">;</span> j<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">if</span> <span class="token punctuation">(</span>
            sheetsList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span>selectorText <span class="token operator">&amp;&amp;</span>
            sheetsList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span>selectorText<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;.fa-&quot;</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span>
            sheetsList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span>selectorText<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;,&quot;</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span>
          <span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">::before</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>sheetsList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span>selectorText<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              sheetsIconList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>
                <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>sheetsList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span>selectorText
                  <span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> sheetsList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>cssRules<span class="token punctuation">[</span>j<span class="token punctuation">]</span><span class="token punctuation">.</span>selectorText<span class="token punctuation">.</span>length<span class="token punctuation">)</span>
                  <span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\:\:before</span><span class="token regex-delimiter">/</span><span class="token regex-flags">gi</span></span><span class="token punctuation">,</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
              <span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>sheetsIconList<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token function">resolve</span><span class="token punctuation">(</span>sheetsIconList<span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">else</span> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">&quot;未获取到值，请刷新重试&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><blockquote><p>4.2、<code>/@/utils/getStyleSheets.ts</code> 中导出使用</p></blockquote><div class="language-ts"><pre><code><span class="token comment">/**
 * 获取字体图标 `document.styleSheets`
 * @method ali 获取阿里字体图标 `&lt;i class=&quot;iconfont 图标类名&quot;&gt;&lt;/i&gt;`
 * @method ele 获取 element plus 自带图标 `&lt;i class=&quot;图标类名&quot;&gt;&lt;/i&gt;`
 * @method ali 获取 fontawesome 的图标 `&lt;i class=&quot;fa 图标类名&quot;&gt;&lt;/i&gt;`
 */</span>
<span class="token keyword">const</span> initIconfont <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// iconfont</span>
  <span class="token function-variable function">ali</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">getAlicdnIconfont</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// element plus</span>
  <span class="token function-variable function">ele</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">getElementPlusIconfont</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// fontawesome</span>
  <span class="token function-variable function">awe</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">getAwesomeIconfont</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// 导出方法</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> initIconfont<span class="token punctuation">;</span>
</code></pre></div><h2 id="自定义封装-svg-图标" tabindex="-1">自定义封装 svg 图标 <a class="header-anchor" href="#自定义封装-svg-图标" aria-hidden="true">#</a></h2><p style="font-weight:bold;">一、封装 svg 组件</p><blockquote><p><a href="https://element-plus.gitee.io/zh-CN/component/icon.html" target="_blank" rel="noopener noreferrer">结合 el-icon 使用</a>，<code>el-icon</code> 为 raw SVG 图标提供额外的属性, 提供的详细属性请继续阅读。路径：<code>/@/components/svgIcon</code></p></blockquote><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token comment">// 渲染函数：https://v3.cn.vuejs.org/guide/render-function.html</span>
  <span class="token keyword">import</span> <span class="token punctuation">{</span> h<span class="token punctuation">,</span> resolveComponent<span class="token punctuation">,</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;svgIcon&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token comment">// svg 图标组件名字</span>
      <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">type</span><span class="token operator">:</span> String<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token comment">// svg 大小</span>
      <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">type</span><span class="token operator">:</span> Number<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token comment">// svg 颜色</span>
      <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">type</span><span class="token operator">:</span> String<span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">setup</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>props<span class="token punctuation">.</span>name<span class="token operator">?.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;element&quot;</span><span class="token punctuation">)</span> <span class="token operator">&gt;</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
          <span class="token function">h</span><span class="token punctuation">(</span>
            <span class="token string">&quot;i&quot;</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
              <span class="token keyword">class</span><span class="token operator">:</span> <span class="token string">&quot;el-icon&quot;</span><span class="token punctuation">,</span>
              <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">--font-size: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>props<span class="token punctuation">.</span>size<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;--color: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>props<span class="token punctuation">.</span>color<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">[</span><span class="token function">h</span><span class="token punctuation">(</span><span class="token function">resolveComponent</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
          <span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span>
          <span class="token function">h</span><span class="token punctuation">(</span><span class="token string">&quot;i&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
            <span class="token keyword">class</span><span class="token operator">:</span> props<span class="token punctuation">.</span>name<span class="token punctuation">,</span>
            <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">font-size: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>props<span class="token punctuation">.</span>size<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;color: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>props<span class="token punctuation">.</span>color<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p style="font-weight:bold;">二、局部注册 &amp; 全局注册 svg 组件</p><blockquote><p>2.1、局部注册</p></blockquote><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword">import</span> <span class="token punctuation">{</span> defineComponent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;vue&quot;</span><span class="token punctuation">;</span>
  <span class="token keyword">import</span> SvgIcon <span class="token keyword">from</span> <span class="token string">&quot;/@/components/svgIcon/index.vue&quot;</span><span class="token punctuation">;</span>
  <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">defineComponent</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&quot;xxx&quot;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span> SvgIcon <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token comment">// 页面上使用</span>
  <span class="token operator">&lt;</span>SvgIcon <span class="token operator">:</span>name<span class="token operator">=</span><span class="token string">&quot;item.meta.icon&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><blockquote><p>2.2、全局注册（框架中使用全局注册）</p></blockquote><p><code>/@/utils/other.ts</code> 中的 <code>elSvg</code> 方法</p><div class="language-ts"><pre><code><span class="token comment">// 全局注册</span>
<span class="token keyword">import</span> SvgIcon <span class="token keyword">from</span> <span class="token string">&#39;/@/components/svgIcon/index.vue&#39;</span><span class="token punctuation">;</span>
app<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">&quot;SvgIcon&quot;</span><span class="token punctuation">,</span> SvgIcon<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 页面上使用</span>
<span class="token operator">&lt;</span>SvgIcon <span class="token operator">:</span>name<span class="token operator">=</span><span class="token string">&quot;item.meta.icon&quot;</span> <span class="token operator">/</span><span class="token operator">&gt;</span>

<span class="token comment">// 或者</span>
<span class="token operator">&lt;</span>SvgIcon name<span class="token operator">=</span><span class="token string">&quot;elementAim&quot;</span> <span class="token operator">:</span>size<span class="token operator">=</span><span class="token string">&quot;14&quot;</span> color<span class="token operator">=</span><span class="token string">&quot;#333333&quot;</span><span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre></div><h2 id="自定义引入本地图标" tabindex="-1">自定义引入本地图标 <a class="header-anchor" href="#自定义引入本地图标" aria-hidden="true">#</a></h2><p style="font-weight:bold;">一、下载 iconfont 到本地</p><blockquote><p>1.1、建议 icon 或者 svg 图标放入到 <code>/src/theme</code> 文件夹中，方便管理。<a href="https://www.iconfont.cn/" target="_blank" rel="noopener noreferrer">iconfont 下载</a>，其它渠道类似操作</p></blockquote><p>如果引入本地 iconfont，需要先删除 <code>/@/utils/setIconfont.ts</code> cssCdnUrlList 方法中的在线链接，把刚下载的 <code>iconfont</code> 图标文件夹重新命名为 <code>iconfont</code> 粘贴到 <code>/src/theme</code> 文件夹中</p><p style="font-weight:bold;">二、引入 iconfont 本地图标</p><blockquote><p>2.1、建议在 <code>/src/theme/index.scss</code> 中引入（不建议直接在 main.ts 中引入）</p></blockquote><div class="language-scss"><pre><code><span class="token comment">// 在 `/src/theme/index.scss`</span>
<span class="token keyword">@import</span> <span class="token string">&quot;./iconfont/iconfont.css&quot;</span><span class="token punctuation">;</span>
</code></pre></div><blockquote><p>2.2、图标查看，直接进入 <code>/src/theme/iconfont/demo_index.html</code> 进行对应的图标查看，然后 cv 到自己项目中使用</p></blockquote><div class="language-html"><pre><code><span class="token comment">&lt;!-- 项目使用 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>iconfont xitongshezhi<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 或者 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>SvgIcon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>iconfont xitongshezhi<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>SvgIcon</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></div></div><footer class="page-footer" data-v-1c2e469b data-v-0673e034><div class="edit" data-v-0673e034><div class="edit-link" data-v-0673e034 data-v-8a069728><a class="link" href="https://gitee.com/lyt-top/vue-next-admin-doc/edit/master/config/iconfont/index.md" target="_blank" rel="noopener noreferrer" data-v-8a069728>欢迎到 Gitee 上编辑此页！ <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-8a069728><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-0673e034><p class="last-updated" data-v-0673e034 data-v-90112f00><span class="prefix" data-v-90112f00>上次更新:</span><span class="datetime" data-v-90112f00></span></p></div></footer><div class="next-and-prev-link" data-v-1c2e469b data-v-7587c728><div class="container" data-v-7587c728><div class="prev" data-v-7587c728><a class="link" href="/vue-next-admin-doc-preview/config/layoutConfig/" data-v-7587c728><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-7587c728><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-7587c728>布局配置</span></a></div><div class="next" data-v-7587c728><a class="link" href="/vue-next-admin-doc-preview/config/server/" data-v-7587c728><span class="text" data-v-7587c728>服务端交互</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-7587c728><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"config_build_index.md\":\"25a4868c\",\"config_builtplug_index.md\":\"5b54ad9e\",\"config_charts_index.md\":\"8f5e7e91\",\"config_directive_index.md\":\"cea57dfb\",\"config_i18n_index.md\":\"91989455\",\"config_iconfont_index.md\":\"5afbfc15\",\"config_index.md\":\"423a6220\",\"config_layoutconfig_index.md\":\"8502b019\",\"config_menu_index.md\":\"87cf7540\",\"config_otherissues_index.md\":\"8c11a5f0\",\"config_partyplug_index.md\":\"952fb091\",\"config_power_index.md\":\"a860276d\",\"config_route_index.md\":\"4b1161ed\",\"config_server_index.md\":\"6e007fa7\",\"config_support_index.md\":\"14b17028\",\"config_tagsview_index.md\":\"d780cf23\",\"config_tool_index.md\":\"e5ffcf9f\",\"config_vuex_index.md\":\"4ba3ea39\",\"home_compatible_index.md\":\"e98f9de6\",\"home_doc_index.md\":\"454b9914\",\"home_eslint_index.md\":\"cf598f3d\",\"home_fast_index.md\":\"61bb01c4\",\"home_forpeople_index.md\":\"3a1d93cd\",\"home_gitpush_index.md\":\"5f11f210\",\"home_index.md\":\"fefbe933\",\"home_install_index.md\":\"b0c69385\",\"home_introduce_index.md\":\"aa5f5748\",\"home_prettier_index.md\":\"55198871\",\"home_thank_index.md\":\"61aa982f\",\"home_vscode_index.md\":\"ff82581e\",\"index.md\":\"4f57e483\"}")</script>
    <script type="module" async src="/vue-next-admin-doc-preview/assets/app.43e6f49f.js"></script>
    
  </body>
</html>